<template>
	<view>
		<order-info :order="order"></order-info>
		<!-- <uni-table border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">违章单据号</uni-th>
				<uni-th align="center">罚款</uni-th>
				<uni-th align="center">扣分</uni-th>
				<uni-th align="center">罚款</uni-th>
				<uni-th align="center">处理状态</uni-th>
				<uni-th align="center">违章服务费</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in settlementList" :key="index">
				<uni-td align="center">{{ item.documentNo }}</uni-td>
				<uni-td align="center">{{ item.illegalFines }}</uni-td>
				<uni-td align="center">{{ item.pointsDeduction }}</uni-td>
				<uni-td align="center">{{ item.processingStatus|processingStatus}}</uni-td>
				<uni-td align="center">{{ item.illegalFines }}</uni-td>
				<uni-td>
				</uni-td>
			</uni-tr>

		</uni-table> -->
		<view class="item">
			<text class="title">
				车辆违章
			</text>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			<view v-for="(item, index) in settlementList" :key="item.id">
				<view style="display: inline-block;width: 90%;">
					<view class="text-line">
						<text class="text-name">违章单据号:</text>
						<text class="text-value">{{item.documentNo|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">违章内容:</text>
						<text class="text-value">{{item.illegalDetail|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">违章地点:</text>
						<text class="text-value">{{item.illegalLocation|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">违章罚款:</text>
						<text class="text-value">{{item.illegalFines|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">违章扣分:</text>
						<text class="text-value">{{item.pointsDeduction|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">违章时间:</text>
						<text class="text-value">{{item.illegalTime|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">处理状态:</text>
						<text class="text-value">{{item.processingStatus|processingStatus}}</text>
					</view>
					<view class="text-line">
						<text class="text-name" style="color: #17c5c5 !important;">违章服务费:</text>
						<u--input v-model="item.deductions" placeholder="请输入违章服务费"></u--input>
					</view>
				</view>
			</view>
		</view>
		
		<mescroll-empty v-if="settlementList.length==0" ></mescroll-empty>
		<u-popup :show="open" @close="open=false">
			<text class="title">
				订单号：{{order.orderNo}}
			</text>
			<view class="formInfo">
				<u--form class="item" label-width="100" labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="扣款原因:" prop="deductionsFor" required ref="deductionsFor">
						<u--input v-model="form.deductionsFor" placeholder="请选择扣款原因"></u--input>
					</u-form-item>
					<!-- <u-form-item label="扣款方式:" prop="deductionsAmount" required ref="deductionsAmount">
						<u--input v-model="form.deductionsAmount" placeholder="请选择扣款方式"></u--input>
					</u-form-item> -->
					<u-form-item label="扣款金额:" prop="deductionsAmount" required ref="deductionsAmount">
						<u--input v-model="form.deductionsAmount" placeholder="请输入扣款金额"></u--input>
					</u-form-item>
					<!-- <u-form-item label="补充金额:" prop="vehicleMileage" required ref="vehicleMileage">
						<u--input v-model="form.vehicleMileage" placeholder="是否需要补充金额"></u--input>
					</u-form-item> -->
					<view class="text-line">
						<text class="text-name">车损照片 {{form.cheSunImage.length||0}}/5</text>
					</view>
					<view class="text-line">
						<sr-upload maxCount="5" @uploadResult="cheSunImageChange"></sr-upload>
					</view>
					<view class="text-line">
						<text class="text-name">单据凭证照片（维修单-定损单-事故单等） {{form.maintainImage.length||0}}/3</text>
					</view>
					<view class="text-line">
						<sr-upload maxCount="3" @uploadResult="maintainImageChange"></sr-upload>
					</view>
					<view>
						<button type="info" @click="submitForm">保&nbsp;&nbsp;存</button>
					</view>
				</u--form>
			</view>
		</u-popup>



		<button type="info" class="sub-btn" @click="OverDepositSettlement">保&nbsp;&nbsp;存</button>
	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue';
	import orderInfo from './component/orderInfo.vue';
	import * as api from '@/api/order-api.js';
	export default {
		components: {
			srUpload,
			orderInfo
		},
		data() {
			return {
				order: {},
				settlementList: [],
				open: false,
				form: {
					type: 1,
					deductionsWay: 1,
					cheSunImage: [],
					maintainImage: []
				},
				title: "",
				rules: {
					fuelCapacity: {
						type: 'string',
						required: true,
						message: '请填写车辆油量',
						trigger: ['blur', 'change']
					},
					vehicleMileage: {
						type: 'string',
						required: true,
						message: '请填写车辆公里数',
						trigger: ['blur', 'change']
					},
					accessoryItems: {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择车辆随车物品',
						trigger: ['change']
					},
					takeAlsoTime: {
						type: 'string',
						min: 2,
						required: true,
						message: '请选择取车时间',
						trigger: ['change']
					},
				}
			}
		},
		methods: {
			doDepositRefundDetail() {
				api.IllegalProcessing(this.order.orderNo).then(response => {
					this.detail = response.data || {};
					this.shortBasic = response.data.shortBasic || {};
					this.settlementList = response.data.settlementList || [];
					this.loading = false
				});
			},
			cheSunImageChange(data) {
				this.form.cheSunImage = data
			},
			maintainImageChange(data) {
				this.form.maintainImage = data
			},
			OverDepositSettlement() {
				// 		this.$modal.confirm('提交后将不可编辑,请确认是否已完成押金退款或收取补缴费用？').then(() => {


				// 		})
				let data = {
					orderNo: this.order.orderNo,
					carIllegalList: this.settlementList
				}
				api.OverIllegalDeposit(data).then(response => {
					uni.$emit("refreshOrder");
					this.$u.toast('提交成功')
					uni.navigateBack({
						animationDuration: 300
					})
				});
			},
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.doDepositRefundDetail();
		},
	}
</script>

<style>
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding-bottom: 120rpx;

	}

	/* .text-name {
		width: 155rpx;
		color: #303133;
		font-size: 15px;
	} */

	.text-line {
		margin: 0 20rpx 20rpx 20rpx;
	}

	.item {
		margin-bottom: 120rpx;
	}

	.flex-item {
		flex: 1
	}

	.checkbox-box {
		padding: 20rpx;
	}

	.checkbox-item {
		min-width: 165rpx;
		transform: scale(0.9)
	}
</style>
